<template>
  <div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="clickReassignment">
      <!--   name 与 fault-type 名字一致方便传参   -->
      <el-tab-pane label="待分配" name="0">
        <fault-data :faults="faults" page-type="0" :total="total" />
      </el-tab-pane>
      <el-tab-pane label="重新分配" name="1">
        <fault-data :faults="faults" page-type="1" :total="total" />
      </el-tab-pane>
      <el-tab-pane label="待审核" name="3">
        <fault-data :faults="faults" page-type="3" :total="total" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import FaultData from '../../components/repair/fault-data'
import { fetchFaults } from "../../utils/repairData";

export default {
  name: 'Assignment',
  components: {
    'fault-data': FaultData
  },
  data() {
    return {
    //  向 fault-data 中传递的数据
    //  那个页面调用的 fault-data
      activeName: '0',
      faults: [],
      total: 0,
      // 查询条件
      queryParams: {
        pageType: 0,
        page: 1,
        size: 10
      }
    }
  },
  mounted() {
    this.initFaults()
  },
  methods: {
    initFaults() {
      const response = fetchFaults(this.queryParams.pageType, this.queryParams.page, this.queryParams.size)
      this.faults = response.data.faults
      this.total = response.data.total
    },
    clickReassignment(tab) {
      this.queryParams.pageType = tab.name
      this.initFaults()
    }
  }
}
</script>

<style>

</style>
